{% extends "base.html" %}

{% block title %}工作台 - 图片定制工具{% endblock %}

{% block content %}
<!-- 页面标题 -->
<div class="page-header">
    <div class="row align-items-center">
        <div class="col">
            <h1 class="page-title">
                <i class="bi bi-speedometer2 me-2"></i>工作台
            </h1>
            <p class="page-description">欢迎使用图片定制工具，专业的企业级图片处理平台</p>
        </div>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-value">{{ templates|length if templates else 0 }}</div>
            <div class="stat-label">底板模板</div>
            <div class="stat-change positive">
                <i class="bi bi-arrow-up"></i>
                <span>活跃使用</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-value">{{ projects|length if projects else 0 }}</div>
            <div class="stat-label">定制项目</div>
            <div class="stat-change positive">
                <i class="bi bi-arrow-up"></i>
                <span>进行中</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-value">100%</div>
            <div class="stat-label">系统可用性</div>
            <div class="stat-change positive">
                <i class="bi bi-check-circle"></i>
                <span>正常运行</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-value">本地</div>
            <div class="stat-label">部署模式</div>
            <div class="stat-change">
                <i class="bi bi-shield-check"></i>
                <span>安全可靠</span>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- 功能介绍卡片 -->
    <div class="col-md-6">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <div class="feature-icon mb-3">
                    <i class="bi bi-grid-3x3-gap display-4 text-primary"></i>
                </div>
                <h5 class="card-title">底板管理</h5>
                <p class="card-text text-muted">
                    创建和管理不同版型的底板裁片，配置定制区域的位置和尺寸，支持PSD格式文件上传
                </p>
                <a href="{{ url_for('templates') }}" class="btn btn-outline-primary">
                    立即管理
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <div class="feature-icon mb-3">
                    <i class="bi bi-robot display-4 text-success"></i>
                </div>
                <h5 class="card-title">智能图片定位</h5>
                <p class="card-text text-muted">
                    AI智能识别服装部位，自动将JSON图片定位到前胸、后背、袖子、领口等位置，支持批量上传和一键适配
                </p>
                <a href="{{ url_for('intelligent_positioning') }}" class="btn btn-outline-success">
                    智能分析
                </a>
            </div>
        </div>
    </div>
    
    {# 隐藏普通图片定制功能卡片
    <div class="col-md-4">
        <div class="card h-100 shadow-sm">
            <div class="card-body text-center">
                <div class="feature-icon mb-3">
                    <i class="bi bi-palette display-4 text-warning"></i>
                </div>
                <h5 class="card-title">精确定制</h5>
                <p class="card-text text-muted">
                    可视化编辑界面，支持拖拽调整图片位置、大小和旋转角度
                </p>
                <a href="{{ url_for('customize') }}" class="btn btn-outline-warning">
                    开始定制
                </a>
            </div>
        </div>
    </div>
    #}
</div>

<div class="row mt-5">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>使用流程
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 text-center mb-3">
                        <div class="step-number">1</div>
                        <h6 class="mt-2">创建底板</h6>
                        <p class="text-muted small">设置底板尺寸和定制区域</p>
                    </div>
                    <div class="col-md-3 text-center mb-3">
                        <div class="step-number">2</div>
                        <h6 class="mt-2">上传配置</h6>
                        <p class="text-muted small">上传包含图片信息的JSON文件</p>
                    </div>
                    <div class="col-md-3 text-center mb-3">
                        <div class="step-number">3</div>
                        <h6 class="mt-2">调整定制</h6>
                        <p class="text-muted small">可视化调整图片位置和大小</p>
                    </div>
                    <div class="col-md-3 text-center mb-3">
                        <div class="step-number">4</div>
                        <h6 class="mt-2">导出结果</h6>
                        <p class="text-muted small">保存并下载最终的定制图片</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.feature-icon {
    padding: 1rem;
    border-radius: 50%;
    background-color: rgba(0, 123, 255, 0.1);
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 60px;
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0 auto;
}
</style>
{% endblock %}
